SignalR হল ASP.Net এর একটি লাইব্রেরি, যা রিয়েল-টাইম ওয়েব অ্যাপ্লিকেশন তৈরি করার জন্য ব্যবহৃত হয়। এটি সার্ভার এবং ক্লায়েন্টের মধ্যে অবিরাম এবং ডুয়াল-ডাইরেকশনাল যোগাযোগ সক্ষম করে, অর্থাৎ সার্ভার ক্লায়েন্টের সাথে যোগাযোগ করতে পারে এবং ক্লায়েন্টও সার্ভারের সাথে ইন্টারঅ্যাক্ট করতে পারে। SignalR অ্যাপ্লিকেশনগুলি সাধারনত চ্যাট অ্যাপ্লিকেশন, রিয়েল-টাইম ড্যাশবোর্ড, নোটিফিকেশন সিস্টেম, লাইভ আপডেট ইত্যাদি তৈরি করতে ব্যবহৃত হয়।
SignalR হল একটি হাইপার-ফাস্ট, ওপেন সোর্স লাইব্রেরি যা আপনি রিয়েল-টাইম যোগাযোগের জন্য ব্যবহার করতে পারেন। এটি হাই-ফ্রিকোয়েন্সি আপডেটের জন্য ডিজাইন করা হয়েছে, যেমন মেসেজ পুশ, লাইভ ডেটা ফিড, লাইভ চ্যাট, বা অন্যান্য রিয়েল-টাইম ইন্টারঅ্যাকশন।
SignalR রিয়েল-টাইম কনটেন্ট সরবরাহের জন্য WebSockets, Server-Sent Events (SSE), এবং Long Polling সহ বিভিন্ন প্রযুক্তি ব্যবহার করতে পারে। এটি স্বয়ংক্রিয়ভাবে ক্লায়েন্টের জন্য সেরা প্রযুক্তি বেছে নেবে।
SignalR ব্যবহার করে রিয়েল-টাইম অ্যাপ্লিকেশন তৈরি করতে কয়েকটি ধাপ অনুসরণ করতে হয়:
SignalR এর মূল অংশ হল Hub। হাব হল একটি ক্লাস যা সার্ভার এবং ক্লায়েন্টের মধ্যে মেসেজ পাঠানোর জন্য ব্যবহৃত হয়। হাবের মাধ্যমে সার্ভার ক্লায়েন্টে মেসেজ পাঠাতে পারে এবং ক্লায়েন্টও সার্ভারকে মেসেজ পাঠাতে পারে।
Hub ক্লাস উদাহরণ:
using Microsoft.AspNetCore.SignalR;
public class ChatHub : Hub
{
public async Task SendMessage(string user, string message)
{
await Clients.All.SendAsync("ReceiveMessage", user, message);
}
}
এখানে, SendMessage মেথডে user এবং message প্যারামিটার নেওয়া হচ্ছে এবং সেই মেসেজ সমস্ত ক্লায়েন্টদের কাছে পাঠানো হচ্ছে। Clients.All.SendAsync দ্বারা সমস্ত ক্লায়েন্টের কাছে মেসেজ পৌঁছানো হয়।
ASP.Net Core অ্যাপ্লিকেশনটিতে SignalR সেটআপ করার জন্য প্রথমে Startup.cs ফাইলে SignalR সার্ভিস এবং রাউটিং কনফিগার করতে হয়।
Startup.cs ফাইলে SignalR কনফিগারেশন:
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
services.AddSignalR(); // SignalR সার্ভিস যোগ করা
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UseRouting();
// SignalR হাব রাউটিং কনফিগার করা
app.UseEndpoints(endpoints =>
{
endpoints.MapHub<ChatHub>("/chathub"); // SignalR হাব ম্যাপ করা
});
}
}
এখানে, MapHub মেথডের মাধ্যমে আমরা /chathub URL-এ SignalR হাব রাউটিং সেট করেছি।
SignalR-এর সাথে যোগাযোগ করতে ক্লায়েন্ট সাইডে JavaScript বা TypeScript ব্যবহার করা হয়। SignalR ক্লায়েন্ট লাইব্রেরি ব্যবহার করে ক্লায়েন্ট সাইডে কানেকশন তৈরি এবং সার্ভারের সাথে যোগাযোগ করা হয়।
JavaScript ক্লায়েন্ট সাইড উদাহরণ:
<script src="https://cdnjs.cloudflare.com/ajax/libs/signalr/3.1.9/signalr.min.js"></script>
<script>
const connection = new signalR.HubConnectionBuilder()
.withUrl("/chathub")
.build();
connection.on("ReceiveMessage", function (user, message) {
const msg = user + ": " + message;
console.log(msg);
// এখানে আপনি মেসেজটি HTML এ প্রদর্শন করতে পারেন
});
connection.start().catch(function (err) {
return console.error(err.toString());
});
function sendMessage() {
const user = document.getElementById("user").value;
const message = document.getElementById("message").value;
connection.invoke("SendMessage", user, message).catch(function (err) {
return console.error(err.toString());
});
}
</script>
<!-- HTML Elements for User input -->
<input type="text" id="user" placeholder="Your Name" />
<input type="text" id="message" placeholder="Your Message" />
<button onclick="sendMessage()">Send Message</button>
এখানে, HubConnectionBuilder ব্যবহার করে /chathub URL থেকে SignalR হাবের সাথে কানেকশন তৈরি করা হচ্ছে। ReceiveMessage মেথডের মাধ্যমে ক্লায়েন্টে মেসেজ গ্রহণ করা হচ্ছে।
SignalR ব্যবহার করে আপনি অনেক ধরনের রিয়েল-টাইম অ্যাপ্লিকেশন তৈরি করতে পারেন, যেমন:
SignalR যখন একাধিক সার্ভার বা ক্লাউড পরিবেশে ব্যবহৃত হয়, তখন এটি scale out করতে পারে। একাধিক সার্ভারে একযোগে SignalR হাব সেশন বজায় রাখতে, আপনি Redis বা Azure SignalR Service এর মত প্রযুক্তি ব্যবহার করতে পারেন।
Redis SignalR Scale Out উদাহরণ:
public void ConfigureServices(IServiceCollection services)
{
services.AddSignalR()
.AddStackExchangeRedis("your-redis-connection-string", options =>
{
options.Configuration.ChannelPrefix = "SignalR";
});
}
এখানে AddStackExchangeRedis ব্যবহার করে Redis সার্ভার ব্যবহার করে SignalR হাবের সেশন শেয়ার করা হয়েছে।
SignalR ASP.Net Core অ্যাপ্লিকেশনগুলিতে রিয়েল-টাইম যোগাযোগের জন্য একটি শক্তিশালী এবং সহজ সমাধান প্রদান করে। এটি সার্ভার এবং ক্লায়েন্টের মধ্যে দ্রুত এবং অবিরত যোগাযোগ প্রতিষ্ঠা করতে সক্ষম, এবং এটি ক্লাউড, মাইক্রোসার্ভিস এবং স্কেলেবেল পরিবেশে কাজ করতে সক্ষম। SignalR ব্যবহার করে আপনি রিয়েল-টাইম চ্যাট, লাইভ ডেটা আপডেট, নোটিফিকেশন সিস্টেম এবং আরও অনেক ধরনের অ্যাপ্লিকেশন তৈরি করতে পারেন।
SignalR হল একটি ASP.Net লাইব্রেরি যা রিয়েল-টাইম ওয়েব অ্যাপ্লিকেশন তৈরি করার জন্য ব্যবহৃত হয়। এটি সার্ভার এবং ক্লায়েন্টের মধ্যে দ্বিমুখী যোগাযোগ (two-way communication) সক্ষম করে, অর্থাৎ সার্ভার ক্লায়েন্টকে push notification পাঠাতে পারে এবং ক্লায়েন্ট সার্ভারের সাথে রিয়েল-টাইমে যোগাযোগ করতে পারে। SignalR মূলত ওয়েবসকেট, লং পোলিং, এবং অন্যান্য প্রযুক্তির উপর ভিত্তি করে কাজ করে।
SignalR ব্যবহার করে আপনি অ্যাপ্লিকেশনে রিয়েল-টাইম ফিচারগুলো যেমন চ্যাট রুম, লাইভ আপডেট, লিডারবোর্ড, নোটিফিকেশন সিস্টেম ইত্যাদি তৈরি করতে পারেন।
SignalR এর মাধ্যমে আপনি সার্ভার এবং ক্লায়েন্টের মধ্যে সহজে রিয়েল-টাইম ডেটা ট্রান্সফার করতে পারেন। এর কিছু প্রধান বৈশিষ্ট্য হল:
SignalR সাধারণত Hub ব্যবহার করে ক্লায়েন্ট এবং সার্ভারের মধ্যে যোগাযোগ করতে সাহায্য করে। Hub হল একটি বিশেষ ক্লাস যা method calls (ক্লায়েন্ট থেকে সার্ভারে এবং সার্ভার থেকে ক্লায়েন্টে) পরিচালনা করে।
SignalR ব্যবহার করার জন্য প্রথমে একটি Hub ক্লাস তৈরি করতে হবে যা ক্লায়েন্ট এবং সার্ভারের মধ্যে যোগাযোগ পরিচালনা করবে।
public class ChatHub : Hub
{
// ক্লায়েন্ট থেকে মেসেজ পাঠানোর জন্য একটি মেথড
public async Task SendMessage(string user, string message)
{
await Clients.All.SendAsync("ReceiveMessage", user, message); // সবাইকে মেসেজ পাঠান
}
}
এখানে, SendMessage মেথডটি সার্ভারের একটি মেথড যা ক্লায়েন্ট থেকে আসা মেসেজ গ্রহণ করে এবং Clients.All.SendAsync এর মাধ্যমে সব ক্লায়েন্টে সেই মেসেজ পাঠিয়ে দেয়।
আপনি Startup.cs ফাইলে SignalR সার্ভিস কনফিগার করতে হবে।
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
services.AddSignalR(); // SignalR সার্ভিস যোগ করা
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
app.UseRouting();
// SignalR রাউটিং কনফিগার করা
app.UseEndpoints(endpoints =>
{
endpoints.MapHub<ChatHub>("/chathub");
});
}
}
এখানে, MapHub<ChatHub>("/chathub") এর মাধ্যমে SignalR Hub কে একটি URL পাথ /chathub তে মানচিত্রিত করা হয়েছে। এর মাধ্যমে ক্লায়েন্টরা এই URL পাথে রিকোয়েস্ট পাঠিয়ে সার্ভারের সাথে সংযুক্ত হতে পারে।
SignalR ক্লায়েন্টে JavaScript বা Blazor ব্যবহার করে হাবের সাথে যোগাযোগ করা হয়। উদাহরণস্বরূপ, JavaScript ক্লায়েন্টের কোড:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SignalR Chat</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/signalr/3.1.7/signalr.js"></script>
</head>
<body>
<input type="text" id="userInput" placeholder="Enter your name" />
<textarea id="messageInput" placeholder="Type a message"></textarea>
<button id="sendButton">Send</button>
<div id="messagesList"></div>
<script>
// SignalR Hub এর URL
const connection = new signalR.HubConnectionBuilder()
.withUrl("/chathub")
.build();
// মেসেজ গ্রহণ করার জন্য ক্লায়েন্টের মেথড
connection.on("ReceiveMessage", function(user, message) {
const msg = `${user}: ${message}`;
const li = document.createElement("li");
li.textContent = msg;
document.getElementById("messagesList").appendChild(li);
});
// মেসেজ পাঠানোর জন্য
document.getElementById("sendButton").addEventListener("click", function () {
const user = document.getElementById("userInput").value;
const message = document.getElementById("messageInput").value;
connection.invoke("SendMessage", user, message).catch(function (err) {
return console.error(err.toString());
});
});
// SignalR সংযোগ শুরু
connection.start().catch(function (err) {
return console.error(err.toString());
});
</script>
</body>
</html>
এখানে:
connection.on("ReceiveMessage") ক্লায়েন্টে মেসেজ রিসিভ করার জন্য ব্যবহৃত হয়।connection.invoke("SendMessage") সার্ভারে মেসেজ পাঠানোর জন্য ব্যবহৃত হয়।SignalR এর মাধ্যমে বিভিন্ন ধরনের রিয়েল-টাইম অ্যাপ্লিকেশন তৈরি করা সম্ভব, যেমন:
SignalR একটি শক্তিশালী প্রযুক্তি যা ASP.Net অ্যাপ্লিকেশনে রিয়েল-টাইম দ্বিমুখী যোগাযোগ সক্ষম করে। এটি ব্যবহারকারীদেরকে ইনস্ট্যান্ট আপডেট এবং কমিউনিকেশন প্রদান করতে সাহায্য করে। SignalR এর মাধ্যমে আপনি সহজেই চ্যাট অ্যাপ্লিকেশন, লাইভ ট্র্যাকিং, এবং অন্যান্য রিয়েল-টাইম ফিচার তৈরি করতে পারেন।
SignalR একটি লাইব্রেরি যা ASP.Net Core-এ রিয়েল-টাইম কমিউনিকেশন সুবিধা প্রদান করে। এটি সার্ভার এবং ক্লায়েন্টের মধ্যে অবিরত কানেকশন বজায় রেখে, একে অপরের মধ্যে ডেটা আদান-প্রদান করার সুবিধা দেয়। SignalR ব্যবহার করে, আপনি সহজেই চ্যাট অ্যাপ্লিকেশন, লাইভ ফিড, বা অন্যান্য রিয়েল-টাইম অ্যাপ্লিকেশন তৈরি করতে পারেন যেখানে ডেটা বা ইনফরমেশন ব্যবহারকারীর স্ক্রীনে তাত্ক্ষণিকভাবে রিফ্রেশ হয়।
SignalR প্রায়শই ব্যবহার করা হয় এমন অ্যাপ্লিকেশনগুলিতে যেমন:
ASP.Net Core SignalR এর মাধ্যমে আপনি ক্লায়েন্ট এবং সার্ভারের মধ্যে রিয়েল-টাইম কমিউনিকেশন সহজে সেটআপ করতে পারেন।
SignalR সার্ভার এবং ক্লায়েন্টের মধ্যে রিয়েল-টাইম ডেটা স্ট্রিমিং সম্পাদন করে। এটি বিভিন্ন ধরণের প্রোটোকল (যেমন WebSocket, Server-Sent Events, Long Polling) ব্যবহার করতে পারে, যাতে এটি সেই পরিবেশের সাথে খাপ খায় যেখানে অ্যাপ্লিকেশন রান করছে।
SignalR এর সাহায্যে, অ্যাপ্লিকেশন রিয়েল-টাইম ইভেন্ট বা ডেটা পরিবর্তনগুলির জন্য ওয়েবসকেট কানেকশন সেটআপ করতে পারে। যদি ওয়েবসকেট ব্যবহার করা সম্ভব না হয়, SignalR স্বয়ংক্রিয়ভাবে fallback পদ্ধতি যেমন Server-Sent Events বা Long Polling ব্যবহার করে।
ASP.Net Core অ্যাপ্লিকেশনে SignalR ইন্টিগ্রেট করার জন্য কিছু ধাপ অনুসরণ করতে হয়। চলুন, এই ধাপগুলো বিস্তারিতভাবে দেখি।
SignalR ব্যবহার শুরু করতে হলে, প্রথমে প্রজেক্টে SignalR NuGet প্যাকেজ ইন্সটল করতে হবে। আপনি NuGet Package Manager ব্যবহার করে এই প্যাকেজটি ইনস্টল করতে পারেন:
Install-Package Microsoft.AspNetCore.SignalR
SignalR ক্লায়েন্ট এবং সার্ভারের মধ্যে যোগাযোগের জন্য Hub তৈরি করতে হয়। Hub হলো একটি রিয়েল-টাইম যোগাযোগের কেন্দ্র, যেখানে সার্ভার থেকে ক্লায়েন্টদের মেসেজ পাঠানো এবং ক্লায়েন্ট থেকে সার্ভারে মেসেজ পাঠানো হয়।
using Microsoft.AspNetCore.SignalR;
public class ChatHub : Hub
{
public async Task SendMessage(string user, string message)
{
await Clients.All.SendAsync("ReceiveMessage", user, message);
}
}
এখানে, SendMessage মেথডটি একটি মেসেজ সার্ভার থেকে ক্লায়েন্টে পাঠানোর জন্য ব্যবহার করা হয়। Clients.All.SendAsync সমস্ত সংযুক্ত ক্লায়েন্টদের কাছে মেসেজ পাঠায়।
SignalR Hub কনফিগার করতে Startup.cs ফাইলে এটি পরিষ্কারভাবে রেজিস্টার করতে হবে।
public void ConfigureServices(IServiceCollection services)
{
services.AddSignalR(); // SignalR সেবা যুক্ত করা
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapHub<ChatHub>("/chathub"); // Hub রুটের মাধ্যমে Hub মেপ করা
});
}
এখানে, MapHub<ChatHub>("/chathub") সিগন্যালআর হাবের URL এপ্লিকেশন পিপলাইনে মেপ করে। এটি ক্লায়েন্টদের সাথে হাবের যোগাযোগ স্থাপন করতে সাহায্য করবে।
SignalR হাবের সাথে যোগাযোগ করতে, ক্লায়েন্ট সাইডে JavaScript কোড ব্যবহার করতে হবে। নিচের উদাহরণটি দেখুন:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SignalR Chat</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/signalr/3.1.8/signalr.min.js"></script>
</head>
<body>
<div>
<input type="text" id="userInput" placeholder="Enter username" />
<textarea id="messageInput" placeholder="Enter message"></textarea>
<button onclick="sendMessage()">Send</button>
</div>
<ul id="messagesList"></ul>
<script type="text/javascript">
var connection = new signalR.HubConnectionBuilder()
.withUrl("/chathub")
.build();
connection.on("ReceiveMessage", function (user, message) {
var li = document.createElement("li");
li.textContent = `${user}: ${message}`;
document.getElementById("messagesList").appendChild(li);
});
connection.start().catch(function (err) {
return console.error(err.toString());
});
function sendMessage() {
var user = document.getElementById("userInput").value;
var message = document.getElementById("messageInput").value;
connection.invoke("SendMessage", user, message).catch(function (err) {
return console.error(err.toString());
});
}
</script>
</body>
</html>
এখানে, JavaScript কোড SignalR Hub এর সাথে কানেক্ট করছে এবং ReceiveMessage মেথডের মাধ্যমে মেসেজ গ্রহণ করছে। sendMessage ফাংশনটি ব্যবহারকারীর ইনপুট পাঠানোর জন্য সার্ভারে কল করে।
SignalR ASP.Net Core অ্যাপ্লিকেশনে রিয়েল-টাইম কমিউনিকেশন প্রতিষ্ঠা করার জন্য একটি শক্তিশালী লাইব্রেরি। এটি ব্যবহারকারীদের জন্য চ্যাট, লাইভ ফিড, নোটিফিকেশন, এবং অন্যান্য রিয়েল-টাইম সেবা প্রদান করতে সহায়ক। SignalR ব্যবহারে রিয়েল-টাইম অ্যাপ্লিকেশন তৈরি করা সহজ এবং কার্যকরী, এবং এটি বিভিন্ন প্রোটোকল সাপোর্ট করার মাধ্যমে বিভিন্ন পরিবেশে কাজ করতে পারে।
WebSockets এবং Server-Sent Events (SSE) হল দুইটি গুরুত্বপূর্ণ প্রযুক্তি, যা রিয়েল-টাইম যোগাযোগ নিশ্চিত করতে ব্যবহৃত হয়। ASP.Net এ এই দুটি প্রযুক্তি ব্যবহারের মাধ্যমে, আপনি সার্ভার এবং ক্লায়েন্টের মধ্যে দ্বিমুখী যোগাযোগ বা একমুখী ডাটা ফিডিং সহজভাবে সেটআপ করতে পারেন।
WebSockets হল একটি যোগাযোগ প্রোটোকল যা client-server এর মধ্যে পুরোপুরি দ্বিমুখী, স্থায়ী এবং রিয়েল-টাইম যোগাযোগের সুবিধা প্রদান করে। এটি একটি ওপেন কনেকশন তৈরি করে, যা সার্ভার এবং ক্লায়েন্ট উভয়ের মধ্যে ডাটা আদান-প্রদান করতে সক্ষম। WebSocket গুলি মূলত HTTP রিকুয়েস্টের মাধ্যমে শুরু হয়, তবে পরবর্তীতে তারা একটি TCP/IP কনেকশনে স্যুইচ করে, যা কম ল্যাটেন্সি এবং স্থির ডাটা ট্রান্সফার প্রস্তাব করে।
ASP.Net Core তে WebSocket সমর্থন শুরু করতে হলে, আপনাকে প্রথমে Startup.cs ফাইলে WebSocket middleware কনফিগার করতে হবে।
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
services.AddControllersWithViews();
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Home/Error");
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
// WebSocket middleware configuration
app.UseWebSockets();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
});
}
}
public class WebSocketHandler
{
private readonly RequestDelegate _next;
public WebSocketHandler(RequestDelegate next)
{
_next = next;
}
public async Task Invoke(HttpContext context)
{
if (context.WebSockets.IsWebSocketRequest)
{
var webSocket = await context.WebSockets.AcceptWebSocketAsync();
await HandleWebSocketAsync(webSocket);
}
else
{
await _next(context);
}
}
private async Task HandleWebSocketAsync(WebSocket webSocket)
{
var buffer = new byte[1024 * 4];
WebSocketReceiveResult result;
do
{
result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
await webSocket.SendAsync(new ArraySegment<byte>(buffer, 0, result.Count), WebSocketMessageType.Text, true, CancellationToken.None);
} while (!result.CloseStatus.HasValue);
await webSocket.CloseAsync(result.CloseStatus.Value, result.CloseStatusDescription, CancellationToken.None);
}
}
const socket = new WebSocket('ws://localhost:5000/socket');
socket.onopen = function(event) {
console.log('WebSocket is connected');
socket.send("Hello Server");
};
socket.onmessage = function(event) {
console.log("Message from server: " + event.data);
};
socket.onclose = function(event) {
console.log('WebSocket is closed');
};
Server-Sent Events (SSE) হল একটি ওয়েব প্রযুক্তি যা একমুখী (server-to-client) রিয়েল-টাইম ডাটা ট্রান্সফার করতে ব্যবহৃত হয়। SSE প্রোটোকল HTTP এর উপর ভিত্তি করে কাজ করে এবং ক্লায়েন্টকে সার্ভার থেকে পুশ ডাটা প্রদান করতে সক্ষম। এটি মূলত এমন অ্যাপ্লিকেশনগুলির জন্য উপযুক্ত, যেখানে সার্ভার বারবার ক্লায়েন্টকে নতুন ডাটা পাঠাতে চায়, যেমন নিউজ ফিড, লাইভ সাপোর্ট, বা স্টক মার্কেট আপডেট।
SSE ব্যবহারের জন্য, সার্ভার থেকে ক্লায়েন্টকে পুশ ডাটা পাঠাতে হবে, যেটি একটি text/event-stream কনটেন্ট টাইপে পাঠানো হয়।
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
}
[HttpGet("/events")]
public async Task GetSse()
{
Response.ContentType = "text/event-stream";
for (int i = 0; i < 100; i++)
{
await Response.WriteAsync($"data: {DateTime.Now}\n\n");
await Response.Body.FlushAsync();
await Task.Delay(1000); // Delay between events
}
}
}
const eventSource = new EventSource('/events');
eventSource.onmessage = function(event) {
console.log('New message from server: ' + event.data);
};
eventSource.onerror = function(event) {
console.error("Error occurred in EventSource connection.");
};
| বৈশিষ্ট্য | WebSockets | Server-Sent Events (SSE) |
|---|---|---|
| কমিউনিকেশন টাইপ | দ্বিমুখী (server-to-client এবং client-to-server) | একমুখী (server-to-client) |
| প্রোটোকল | WebSocket (TCP) | HTTP |
| স্ট্যান্ডার্ড | RFC 6455 | HTML5 |
| ব্যবহার | চ্যাট অ্যাপ্লিকেশন, গেমস, লাইভ ডাটা ফিড | লাইভ আপডেট, নিউজ ফিড, স্টক মার্কেট |
| পোর্ট | সাধারণত পোর্ট 80 বা 443 (HTTP/HTTPS) | পোর্ট 80 বা 443 (HTTP/HTTPS) |
| ডাটা ফরম্যাট | বাইনারি বা টেক্সট | টেক্সট |
WebSockets এবং Server-Sent Events (SSE) দুটি শক্তিশালী প্রযুক্তি যা রিয়েল-টাইম কমিউনিকেশন সিস্টেম তৈরিতে ব্যবহৃত হয়। WebSockets দ্বিমুখী কমিউনিকেশন সুবিধা প্রদান করে এবং ডাটা আদান-প্রদান দ্রুত হয়, তবে এটি একটু বেশি কনফিগারেশন এবং সাপোর্ট চায়। অপরদিকে, SSE সহজ এবং HTTP ভিত্তিক একমুখী কমিউনিকেশন সুবিধা প্রদান করে, যা সাধারণত লাইভ ডাটা ফিডের জন্য উপযুক্ত।
ASP.Net Core ব্যবহার করে একটি real-time chat application তৈরি করা সম্ভব। এর জন্য SignalR টেকনোলজি ব্যবহার করা হয়, যা real-time web functionality প্রদান করে, যেমন ইন্টারেকটিভ chat অ্যাপ্লিকেশন বা live notifications। SignalR প্রক্রিয়াটি ক্লায়েন্ট ও সার্ভারের মধ্যে ডেটা সহজভাবে এবং দ্রুতভাবে ট্রান্সফার করতে সাহায্য করে।
এখানে একটি সাধারণ chat application তৈরি করার উদাহরণ দেওয়া হলো যেখানে ক্লায়েন্টরা real-time চ্যাট করতে পারে।
প্রথমে, ASP.Net Core Web Application তৈরি করুন এবং প্রজেক্ট টাইপ হিসেবে Web Application (Model-View-Controller) নির্বাচন করুন।
SignalR ব্যবহার করতে, আপনার প্রজেক্টে Microsoft.AspNetCore.SignalR NuGet প্যাকেজ ইনস্টল করতে হবে। এটি SignalR এর জন্য প্রয়োজনীয় লাইব্রেরি।
dotnet add package Microsoft.AspNetCore.SignalR
SignalR একটি Hub এর মাধ্যমে সার্ভার ও ক্লায়েন্টের মধ্যে কমিউনিকেশন পরিচালনা করে। Hub একটি বিশেষ ক্লাস যা ক্লায়েন্ট এবং সার্ভারের মধ্যে মেসেজ পাঠানোর জন্য ব্যবহৃত হয়।
প্রথমে Hub ক্লাসটি তৈরি করুন:
using Microsoft.AspNetCore.SignalR;
public class ChatHub : Hub
{
// মেসেজ পাঠানো
public async Task SendMessage(string user, string message)
{
// সার্ভার থেকে সব ক্লায়েন্টদের মেসেজ পাঠানো
await Clients.All.SendAsync("ReceiveMessage", user, message);
}
}
এখানে SendMessage মেথডটি ক্লায়েন্ট থেকে সার্ভারে মেসেজ গ্রহণ করে এবং ReceiveMessage মেথডের মাধ্যমে সব ক্লায়েন্টদের মেসেজ পাঠিয়ে দেয়।
Startup.cs বা Program.cs ফাইলে SignalR Hub কনফিগার করুন।
var builder = WebApplication.CreateBuilder(args);
// SignalR সেবা কনফিগার করা
builder.Services.AddSignalR();
var app = builder.Build();
// SignalR Hub কনফিগার করা
app.MapHub<ChatHub>("/chathub");
app.Run();
Client-side JavaScript দিয়ে SignalR Hub এর সাথে যোগাযোগ তৈরি করতে হবে। এখানে আমরা JavaScript এবং SignalR Client Library ব্যবহার করব।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Application</title>
<script src="https://cdn.jsdelivr.net/npm/@microsoft/signalr@5.0.0/dist/browser/signalr.min.js"></script>
</head>
<body>
<div>
<h1>Real-time Chat</h1>
<input type="text" id="userInput" placeholder="Enter your name" />
<textarea id="messageInput" placeholder="Enter your message"></textarea>
<button id="sendButton">Send</button>
</div>
<div id="chatMessages"></div>
<script>
// SignalR Hub Connection
const connection = new signalR.HubConnectionBuilder()
.withUrl("/chathub")
.build();
// মেসেজ রিসিভ করার জন্য ক্লায়েন্ট সাইড মেথড
connection.on("ReceiveMessage", function (user, message) {
const chatMessages = document.getElementById("chatMessages");
const msg = `${user}: ${message}`;
const newMessage = document.createElement("p");
newMessage.textContent = msg;
chatMessages.appendChild(newMessage);
});
// Hub এর সাথে কানেক্ট করা
connection.start().catch(function (err) {
return console.error(err.toString());
});
// Send Button Click হ্যান্ডল করা
document.getElementById("sendButton").addEventListener("click", function () {
const user = document.getElementById("userInput").value;
const message = document.getElementById("messageInput").value;
// সার্ভারে মেসেজ পাঠানো
connection.invoke("SendMessage", user, message).catch(function (err) {
return console.error(err.toString());
});
});
</script>
</body>
</html>
এখানে:
এখন, আপনার ASP.Net Core Chat Application রান করুন। ক্লায়েন্টরা একে অপরের মেসেজ রিয়েল-টাইমে দেখতে পাবে। যখন একটি ক্লায়েন্ট মেসেজ পাঠাবে, তা অন্য সকল ক্লায়েন্টের স্ক্রীনে রিয়েল-টাইমে প্রদর্শিত হবে।
এভাবে আপনি ASP.Net Core এবং SignalR ব্যবহার করে একটি সহজ real-time chat application তৈরি করতে পারেন। SignalR ক্লায়েন্ট এবং সার্ভারের মধ্যে ডেটা আদান-প্রদানকে দ্রুত এবং ইন্টারেকটিভ করতে সহায়তা করে, যা চ্যাট অ্যাপ্লিকেশন, লাইভ নোটিফিকেশন, বা রিয়েল-টাইম ডেটা প্রসেসিংয়ের জন্য খুবই কার্যকর।
SignalR হলো একটি লাইব্রেরি যা অ্যাসিঙ্ক্রোনাস, রিয়েল-টাইম ওয়েব অ্যাপ্লিকেশন তৈরিতে ব্যবহৃত হয়। এটি ক্লায়েন্ট এবং সার্ভারের মধ্যে ডেটা রিয়েল-টাইমে ট্রান্সফার করতে সহায়তা করে, অর্থাৎ ক্লায়েন্টের কোনো অ্যাকশন বা সার্ভারের কোনো পরিবর্তন পলিং ছাড়াই রিয়েল-টাইমে ক্লায়েন্টের কাছে পৌঁছায়। SignalR সাধারণত চ্যাট অ্যাপ্লিকেশন, লাইভ স্টক মার্কেট অ্যাপ্লিকেশন, এবং গেমিং অ্যাপ্লিকেশন তৈরি করতে ব্যবহৃত হয়।
ASP.Net Core SignalR এর সাথে Angular বা React এর ইন্টিগ্রেশন খুবই সহজ এবং এটি আপনাকে রিয়েল-টাইম ডেটা আপডেটের সুবিধা দেয়। এই টিউটোরিয়ালে আমরা দেখব কীভাবে ASP.Net Core SignalR সার্ভার এবং Angular/React ক্লায়েন্ট অ্যাপ্লিকেশন একত্রে কাজ করে।
ASP.Net Core SignalR ইনস্টল ও কনফিগার করা শুরু করার আগে, প্রথমে SignalR NuGet প্যাকেজ ইনস্টল করতে হবে।
NuGet প্যাকেজ ইনস্টল:
dotnet add package Microsoft.AspNetCore.SignalR
SignalR হাব হলো একটি ক্লাস যা সার্ভার এবং ক্লায়েন্টের মধ্যে রিয়েল-টাইম যোগাযোগের জন্য ব্যবহৃত হয়।
ChatHub.cs:
using Microsoft.AspNetCore.SignalR;
public class ChatHub : Hub
{
// ক্লায়েন্ট থেকে সার্ভারে মেসেজ পাঠানো এবং সার্ভারের মাধ্যমে অন্যান্য ক্লায়েন্টদের আপডেট পাঠানো
public async Task SendMessage(string user, string message)
{
await Clients.All.SendAsync("ReceiveMessage", user, message);
}
}
Startup.cs ফাইলে SignalR কনফিগার করুন:
public void ConfigureServices(IServiceCollection services)
{
services.AddSignalR(); // SignalR সার্ভিস যোগ করা
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapHub<ChatHub>("/chathub"); // হাব মেপিং করা
});
}
এখানে ChatHub হল SignalR হাব ক্লাস, যা ক্লায়েন্ট এবং সার্ভারের মধ্যে যোগাযোগ পরিচালনা করে।
Angular এ SignalR ইন্টিগ্রেট করতে, SignalR এর জন্য NuGet প্যাকেজ ইনস্টল করতে হবে:
npm install @microsoft/signalr --save
signalr.service.ts: SignalR এর সাথে যোগাযোগ করার জন্য একটি সার্ভিস তৈরি করুন।
import { Injectable } from '@angular/core';
import { HubConnection, HubConnectionBuilder } from '@microsoft/signalr';
@Injectable({
providedIn: 'root'
})
export class SignalRService {
private hubConnection: HubConnection;
constructor() {
this.hubConnection = new HubConnectionBuilder()
.withUrl('https://localhost:5001/chathub') // SignalR সার্ভারের URL
.build();
this.hubConnection.on('ReceiveMessage', (user: string, message: string) => {
console.log(`${user}: ${message}`);
});
}
public startConnection() {
this.hubConnection.start().catch(err => console.error(err));
}
public sendMessage(user: string, message: string) {
this.hubConnection.invoke('SendMessage', user, message)
.catch(err => console.error(err));
}
}
app.component.ts: SignalR সার্ভিস ব্যবহার করে মেসেজ পাঠান।
import { Component, OnInit } from '@angular/core';
import { SignalRService } from './signalr.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor(private signalRService: SignalRService) {}
ngOnInit() {
this.signalRService.startConnection();
}
sendMessage() {
this.signalRService.sendMessage('User', 'Hello, SignalR!');
}
}
React এ SignalR ব্যবহারের জন্য প্রথমে @microsoft/signalr প্যাকেজ ইনস্টল করতে হবে:
npm install @microsoft/signalr --save
SignalRService.js: SignalR সার্ভিস তৈরি করুন।
import { HubConnectionBuilder } from '@microsoft/signalr';
class SignalRService {
constructor() {
this.connection = new HubConnectionBuilder()
.withUrl("https://localhost:5001/chathub")
.build();
this.connection.on("ReceiveMessage", (user, message) => {
console.log(`${user}: ${message}`);
});
}
startConnection() {
this.connection.start().catch((err) => console.error(err));
}
sendMessage(user, message) {
this.connection
.invoke("SendMessage", user, message)
.catch((err) => console.error(err));
}
}
export default new SignalRService();
App.js: SignalR সার্ভিস ব্যবহার করুন এবং মেসেজ পাঠান।
import React, { useEffect } from 'react';
import SignalRService from './SignalRService';
function App() {
useEffect(() => {
SignalRService.startConnection();
}, []);
const sendMessage = () => {
SignalRService.sendMessage("User", "Hello from React!");
};
return (
<div>
<button onClick={sendMessage}>Send Message</button>
</div>
);
}
export default App;
SignalR এর মাধ্যমে আপনি ASP.Net Core এবং Angular/React অ্যাপ্লিকেশনগুলোর মধ্যে রিয়েল-টাইম যোগাযোগ সহজেই প্রতিষ্ঠা করতে পারেন, যা আধুনিক ওয়েব অ্যাপ্লিকেশনে অত্যন্ত গুরুত্বপূর্ণ।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
